<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
	div{
		background-color: #000;
		width:780px;
		margin:20px auto;
		color: #fff;
		font-size:35px;
	}
	li{
		width:218px;
		padding:10px;
		margin:10px;
		border:1px solid #ccc;
		float: left;
		background-color:#fff;
	}
	ul{
		width:780px;
		margin: 0 auto;
		/*border:1px solid red;*/
		/*
		去掉列表左侧的符号
		*/
		list-style-type:none;
		/*
		去掉列表左侧自带的内边距
		*/
		padding-left:0;
	}
	body{
		background-color:#000;
		font-size:14px;
		text-align: center;
		font-family: 
		"宋体","文权驿正黑","黑体";
		line-height: 1em;
	}
	/*采用相对定位实现抖动效果.*/
	li:hover{
		position:relative;
		left:2px;
		top:2px;	
	}
	/*
		
	*/
</style>
</head>
<body>
	<div>我们的前方有路|永无止境</div>
	<ul>
		<li>
			<img alt="" src="../images/01.jpg">
			<p>又到了秋风萧瑟的时节,</p>
		</li>
		<li>
			<img alt="" src="../images/02.jpg">
			<p>黄叶依旧,你在何方?</p>
		</li>
		<li>
			<img alt="" src="../images/03.jpg">
			<p>有你的日子,真的好!</p>
		</li>
		<li>
			<img alt="" src="../images/04.jpg">
			<p>无论是驾车,</p>
		</li>
		<li>
			<img alt="" src="../images/05.jpg">
			<p>还是泛舟,</p>
		</li>
		<li>
			<img alt="" src="../images/06.jpg">
			<p>定要把你找回!</p>
		</li>
		
	</ul>
</body>
</html>